import React, { useCallback, useState } from 'react'
import style from './index.less'
import { Form, SearchBar, } from 'antd-mobile'
import PageList from '../.info/.item'
import TopList from './.list'
import classnames from 'classnames';
import ActionPanel from '@/components/action-panel'
import PriceRangeForm from '@/components/jiagequjian'
import _ from 'lodash'

export default () => {
    const [searchValue, setSearchValue] = useState('');
    const [visible1, setVisible1] = useState<boolean>(false)
    const [params, setParams] = useState<object>({});
    const [active, setActive] = useState<string | null>(null);
    const [form] = Form.useForm();
    const { validateFields } = form

    const handleInputChange = (value: string) => {
        setSearchValue(value)
        setTimeout(() => {
            onSearch(value)
        }, 500)
    }
    const onSearch = async (value: string) => {
        console.log("SearchValue", value);
    }
    const onOk = useCallback(async () => {
        const { price, ...value } = await validateFields();
        const obj = {
            ...value,
            priceMin: _.isArray(price) ? price[0] : null,
            priceMax: _.isArray(price) ? price[1] : null,
        };
        const res: Record<string, string | boolean> = {};
        Object.keys(obj).forEach((key) => {
            if (!_.isEmpty(obj[key])) {
                res[key] = obj[key];
            }
        });
        setParams(res)
        setActive(null);
        console.log(res);
        
    }, [validateFields])

    return (
        <div className={style.page}>
            <Form
                form={form}
                className={style['condition-warp']}
            >
                <div>
                    <SearchBar
                        placeholder='搜索'
                        onChange={handleInputChange}
                        value={searchValue}
                        className={style.search}
                    />
                </div>
                <div className={style['item-top']}>
                    <div className={classnames(style.condition, {
                        [style.active]: null !== active,
                    })}>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'1' === active}
                                onClick={() => {
                                    if ('1' === active) {
                                        setActive(null);
                                        setVisible1(true);
                                    } else {
                                        setActive('1');
                                    }
                                }}
                                onReset={() => {
                                    form.resetFields();
                                    onOk();
                                }}
                                onOk={onOk}
                                panel={
                                    <TopList
                                        onClick={onOk}
                                        showSearch={true}
                                    />
                                }
                            >
                                分类
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'2' === active}
                                onClick={() => {
                                    if ('2' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('2');
                                    }
                                }}
                                onReset={() => {
                                    onOk();
                                }}
                                onOk={onOk}
                                panel={
                                    <TopList />
                                }
                            >
                                供应地
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'3' === active}
                                onClick={() => {
                                    if ('3' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('3');
                                    }
                                }}
                                panel={
                                    <div className={style.price}>
                                        <div className={style['price-title']}>价格区间</div>
                                        <PriceRangeForm />

                                    </div>
                                }
                            >
                                价格
                            </ActionPanel>
                        </div>
                        <div className={style.item}>
                            <ActionPanel
                                excludeClassName={style.item}
                                visible={'4' === active}
                                onClick={() => {
                                    if ('4' === active) {
                                        setActive(null);
                                    } else {
                                        setActive('4');
                                    }
                                }}
                                onReset={() => {
                                    onOk();
                                }}
                                onOk={onOk}
                                panel={
                                    <TopList />
                                }
                            >
                                产地
                            </ActionPanel>
                        </div>
                    </div>
                </div>
            </Form>
            <div className={style.list}>
                <PageList 
                    params={{
                        ...params
                    }}
                />
            </div>
        </div>
    )
}
